﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>coway</title>
    <link rel="stylesheet" href="./css/element.css">
    <link rel="stylesheet" href="./css/common.css?v=0.1">
    <style>
        .tableCard {
            border-bottom: 1px solid #C0C4CC;
            padding: 10px;
            /* width: 2000px; */
            overflow: hidden;
        }

            .tableCard span {
                float: left;
                margin: 0 10px;
            }

                .tableCard span.spacel span {
                    margin: 0;
                }

        .tableWrap {
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
        }

            .tableWrap .tableCardBox {
                width: 2385px;
            }

        .el-input__inner {
            text-align: left !important;
        }
        
    </style>
</head>

<body>
    <div id="app" v-loading.fullscreen.lock="loading">
        <div class="header">
            <img src="./img/logo.png" width="120px" alt="" class="log">
        </div>
        <div class="body">
            <p style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px 0; font-weight: bold; margin: 20px 0 40px 0;">
                CUSTOMER INFORMATION
            </p>
            <el-form :model="ruleForm" label-suffix=":" :rules="rules" ref="ruleForm" label-width="430px"
                     class="demo-ruleForm" label-position="right">
                <el-form-item label="NAME OF SALES REP\销售姓名" prop="sellerName" label-width="220px">
                    <el-input v-model="ruleForm.sellerName" disabled></el-input>
                </el-form-item>
                <el-form-item label="SALES REP.PHONE\销售电话" prop="sellerPhone" label-width="220px">
                    <el-input v-model="ruleForm.sellerPhone" disabled></el-input>
                </el-form-item>
                <el-form-item label="SALES REP.CODE\销售代号" prop="sellerCode" label-width="220px">
                    <el-input v-model="ruleForm.sellerCode" disabled></el-input>
                </el-form-item>
                <el-form-item label="Purchase Or Rental\购买方式" prop="buyWay" label-width="220px">
                    <el-select v-model="ruleForm.buyWay" placeholder="请选择">
                        <el-option label="PURCHASE\买断" value="payment">
                        </el-option>
                        <el-option label="PURCHASE\买断分期" value="paymentInstallment">
                        </el-option>
                        <el-option label="RENTAL\租赁" value="rental">
                        </el-option>
                        <el-option label="PURCHASE&RENTAL\买断和租赁" value="paymentAndRental"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item label="REMARKS\备注" prop="remarks" style="width: 80%;"  label-width="220px">
                    <el-select v-model="ruleForm.remarks" placeholder="请选择"  class="remarks" :popper-append-to-body="true" >
                        <el-option id="myeloptions" label="首付款，自动转账和一次性收款单 ，销售已收，从客户账号扣款/Down Payment will be charged from the credit card"
                                   value="首付款，自动转账和一次性收款单 ，销售已收，从客户账号扣款/Down Payment will be Charge from the credit card">
                        </el-option>
                        <el-option label="自动转账和一次性收款单，销售已收" value="自动转账和一次性收款单，销售已收"></el-option>
                        <el-option label="其他" value="qt">
                        </el-option>
                    </el-select>
                    <el-input type="textarea" v-if="ruleForm.remarks == 'qt'" :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入备注" v-model="ruleForm.textarea" style="margin-top: 5px;">
                    </el-input>

                </el-form-item>
                <el-form-item label="MONTHLY PAYMENT METHOD(RENTAL ONLY)\每月付款方式" >
                    <el-radio-group size="small" v-model="ruleForm.monthlyPaymentMethod" size="medium">
                        <el-radio-button label="ACH"></el-radio-button>
                        <el-radio-button label="CCR"></el-radio-button>
                        <el-radio-button label="CHECK"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <p style="color: #00A7E1; border-bottom: 1px solid #DCDFE6; padding: 20px 0; font-weight: bold; margin: 30px 0 20px 0;">
                    PRODUCT INFORMATION
                </p>
                <br>
                <el-card v-for="(domain, index) in ruleForm.orderItems"
                         style="position: relative; margin-bottom: 10px; padding-top: 20px;">
                    <p>
                        <span style="position: absolute; left: 10px; top: 10px;">NO.{{index+1}}</span> <i v-if="ruleForm.orderItems.length !=1" class="el-icon-remove" title="删除" style="    font-size: 26px;
                            position: absolute; right: 10px;top: 10px;
                            cursor: pointer;
                            color: red;" @click.prevent="removeDomain(domain)"></i>
                    </p>
                    <el-form-item label="MODEL\型号">

                        <el-select v-model="domain.model" placeholder="请选择">
                            <el-option v-for="item in modalList" :key="item.model" :label="item.model"
                                       :value="item.model">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="QUANTITY\数量">
                        <el-input-number v-model="domain.quantity" controls-position="right" :min="1" :max="100000"
                                         placeholder="QUANTITY" style="text-align: left;"></el-input-number>
                    </el-form-item>

                    <el-form-item label="CONTRACT DURATION(RENTAL ONLY)\租赁期限（仅限租赁）">
                        <el-select v-model="domain.contractDuration" placeholder="请选择">
                            <el-option label="不限" value=""></el-option>
                            <el-option label="3年" :value="3"></el-option>
                            <el-option label="5年" :value="5"></el-option>
                            <el-option label="6年" :value="6"></el-option>
                        </el-select>



                    </el-form-item>

                    <el-form-item label="REGISTRATION FEE(RENTAL ONLY)\租赁登记费（仅限租赁）">
                        <el-input type="number" v-model="domain.registrationFee"
                                  placeholder="REGISTRATION FEE(RENTAL ONLY)">
                            <template slot="append">
                                $
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="MONTHLY RENT(W/O TAX)\每月租赁费">
                        <el-input type="number" v-model="domain.monthlyRent" placeholder="MONTHLY RENT(W/O TAX)">
                            <template slot="append">
                                $
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="SALES PRICE(W/O TAX)\购买价格">
                        <el-input type="number" v-model="domain.salesPrice" placeholder="SALES PRICE(W/O TAX)">
                            <template slot="append">
                                $
                            </template>
                        </el-input>
                    </el-form-item>

                    <!-- <el-form-item label="ORDER TAX\税项">
                        <el-input v-model="domain.orderTax" placeholder="TAX">
                        </el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="TOTAL (USD)\总数">
                        <el-input type="number" v-model="domain.total" placeholder="TOTAL (USD)">

                        </el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="GRAND TOTAL (USD)\总数（含税)">
                        <el-input type="number" v-model="domain.grandTotal" placeholder="GRAND TOTAL (USD)">

                        </el-input>
                    </el-form-item> -->

                    
                </el-card>


                <br>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadBtn">保存</el-button>
                    <el-button @click="addDomain">新增产品</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 成功弹框 -->
        <el-dialog title="提交成功" :visible.sync="dialogVisible" width="50%">
            <p style="text-align: left;font-size: 14px; margin-bottom: 10px;">
                <i class="el-icon-success"
                   style="font-size:18px; color: #67c23a;"></i> 您已经提交成功，请发送以下链接给客户继续填写。
            </p>
            <p>
                {{copyUrl}} <el-button type="text" @click="copyIt">复制连接</el-button>
            </p>
            <p id="copyIt" style="opacity: 0;">{{copyUrl}}</p>
        </el-dialog>


    </div>
</body>
<!-- import Vue before Element -->
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="./js/elementui.js"></script>
<script src="./js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loadBtn: false,
                loading: true,
                modalList: [],
                dialogVisible: false,
                copyUrl: '',
                ruleForm: {
                    "orderNo": "",
                    "referralNo": "",
                    "buyWay": "payment",
                    monthlyPaymentMethod:'ACH',
                    textarea: '',
                    remarks: '首付款，自动转账和一次性收款单 ，销售已收，从客户账号扣款/Down Payment will be charged from the credit card',
                    sellerName: '',
                    sellerCode: '',
                    sellerPhone: '',
                    orderItems: [{
                        model: 'CHP-671L',
                        quantity: '',
                        contractDuration: '',
                        registrationFee: '',
                        monthlyRent: '',
                        salesPrice: '',
                    }],
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'blur'
                    },
                    {
                        min: 3,
                        max: 5,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur'
                    }
                    ],
                    // contractDuration:[{
                    //     required: true,
                    //     message: '请输入活动名称',
                    //     trigger: 'blur'
                    // }]

                }
            }
        },
        methods: {
            copyIt() {
                selectText('copyIt')
                this.$message.success('复制成功')
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.loadBtn) return
                        this.loadBtn = true;
                        this.loading = true
                        this.ruleForm.orderItems[0].monthlyPaymentMethod = this.ruleForm.monthlyPaymentMethod
                        try {
                            axios({
                                method: 'post',
                                data: {
                                    ...this.ruleForm,
                                    remarks: this.ruleForm.remarks == 'qt' ? this.ruleForm
                                        .textarea : this.ruleForm.remarks
                                },
                                url: window.baseUrl + '/api/app/order'
                            }).then(res => {
                                this.loadBtn = false
                                this.loading = false
                                console.log(res, 5555555555555)
                                if (res.status != 200) {
                                    this.$message.error('服务不可用，请联系管理员')
                                    return
                                }
                                this.dialogVisible = true
                                this.copyUrl =
                                    `https://${location.host}/information.html?id=${res.data.id}`

                            }, err => {
                                this.loading = false
                                console.log(err, 'err')
                                this.$message.error('服务器异常，请稍后重试！')
                            })

                        } catch (err) {
                            this.loading = false
                            this.$message.error('服务器异常，请稍后重试！')
                        }




                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            removeDomain(item) {
                var index = this.ruleForm.orderItems.indexOf(item)
                if (index !== -1) {
                    this.ruleForm.orderItems.splice(index, 1)
                }
            },
            addDomain() {
                this.ruleForm.orderItems.push({
                    model: 'CHP-671L',
                    quantity: '',
                    contractDuration: '',
                    registrationFee: '',
                    monthlyRent: '',
                    salesPrice: '',
                    key: Date.now()
                });
            }
        },
        mounted() {
            let _this = this;
            try {
                axios({
                    method: 'get',
                    url: window.baseUrl + '/api/app/product/allproducts',
                }).then(res => {
                    _this.modalList = res.data
                }, err => {
                    console.log(err, 'err')
                    this.$message.error('服务器异常，请稍后重试！')
                })


                axios({
                    method: 'get',
                    url: window.baseUrl + '/api/app/order/draftSellOrder?sellerCode=' +
                        getQueryVariable(
                            'sellerCode'),
                }).then(res => {
                    console.log(res, 333333333)
                    this.loading = false
                    if (res.status != 200) {
                        this.$message.error('服务不可用，请联系管理员')
                        return
                    }
                    this.ruleForm.sellerCode = res.data.sellerCode
                    this.ruleForm.sellerName = res.data.sellerName
                    this.ruleForm.sellerPhone = res.data.sellerPhone
                }, (err, d) => {
                    this.loading = false
                    console.log(err, d, 'err')
                    this.$message.error('服务器异常，请稍后重试！')
                })
            } catch (err) {
                this.loading = false
                console.log(err, 55555555555)
                this.$message.error('服务器异常，请稍后重试！')
            }
        }
    })
</script>

</html>